<template>
  <view class="inputBox">
    <view class="title name fontSizeNone">所在城市</view>
    <view class="uni-list">
      <view class="uni-list-cell-db">
        <picker :value="provinceIndex" :range="provinceData" :range-key="'name'" @change="provinceChange">
          <view :class="[provinceId ? 'uni-input colorBlack' : 'uni-input']">{{
            provinceData[provinceIndex].name
          }}</view>
        </picker>
        <view class="rightIcon"><img :src="rightIcon" /></view>
      </view>
      <view v-if="cityData.length > 1" ref="pickCityShow" class="uni-list-cell-db">
        <picker :value="cityIndex" :range="cityData" :range-key="'name'" @change="cityChange">
          <view :class="[cityId ? 'uni-input colorBlack' : 'uni-input']">{{ cityData[cityIndex].name }}</view>
        </picker>
        <view class="rightIcon"><img :src="rightIcon" /></view>
      </view>
      <view v-if="areaData.length > 1" class="uni-list-cell-db">
        <picker ref="pickAreaShow" :value="areaIndex" :range="areaData" :range-key="'name'" @change="areaChange">
          <view :class="[areaIndex > 0 ? 'uni-input colorBlack' : 'uni-input']">{{ areaData[areaIndex].name }}</view>
        </picker>
        <view class="rightIcon"><img :src="rightIcon" /></view>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * 搜索组件
 */

import rightIcon from '@/static/icon/right.png';
import { getArea } from '@/api/join.js';
export default {
  props: {
    // 是否展示搜索按钮
    choseCityPropsInit: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      rightIcon: rightIcon,
      provinceData: null,
      provinceIndex: 0,
      provinceId: '',
      cityData: {
        name: '请选择市',
        id: ''
      },
      cityIndex: 0,
      cityId: '',
      areaData: {
        name: '请选择区',
        id: ''
      },
      areaIndex: 0,
      areaId: ''
    };
  },
  mounted() {
    this.getProvinceData();
    this.choseCityProps = this.choseCityPropsInit;
  },
  methods: {
    // 获取省份id
    provinceChange(e) {
      this.cityIndex = 0;
      this.cityData = [];
      this.cityId = '';
      this.areaIndex = 0;
      this.areaData = [];
      this.areaId = '';
      this.provinceIndex = e.detail.value;
      this.provinceId = this.provinceData[this.provinceIndex].id;
      this.emitAddressInfo(0, 'province', this.provinceId);
      this.getCityData(this.provinceId);
    },
    // 获取市id
    cityChange(e) {
      this.areaIndex = 0;
      this.areaData = [];
      this.areaId = '';
      this.cityIndex = e.detail.value;
      this.cityId = this.cityData[this.cityIndex].id;
      this.emitAddressInfo(1, 'city', this.cityId);
      this.getAreaData(this.cityId);
    },
    // 获取区id
    areaChange(e) {
      this.areaIndex = e.detail.value;
      this.areaId = this.areaData[this.areaIndex].id;
      this.emitAddressInfo(2, 'area', this.areaId);
    },
    async getProvinceData() {
      const data = {
        provinceId: '',
        cityId: '',
        areaId: ''
      };
      this.provinceData = await getArea(data).then((res) => {
        res.data = res.data.filter((item) => item.id !== '810000' && item.id !== '710000');
        return res.data;
      });
      const initData = {
        name: '请选择省',
        id: ''
      };
      this.provinceData.unshift(initData);
      // 如果有返显，返显对应的数据
      if (this.choseCityProps.areaId) {
        this.initAddressPage();
      }
    },
    async getCityData() {
      const data = {
        provinceId: this.provinceId,
        cityId: '',
        areaId: ''
      };
      this.cityData = await getArea(data).then((res) => res.data);
      const initData = {
        name: '请选择市',
        id: ''
      };
      this.cityData.unshift(initData);
      console.log(this.selectComponent('#abc'));
      // this.$refs.pickCityShow.click();
    },
    async getAreaData() {
      const data = {
        provinceId: this.provinceId,
        cityId: this.cityId,
        areaId: this.areaId
      };
      this.areaData = await getArea(data).then((res) => res.data);
      const initData = {
        name: '请选择区',
        id: ''
      };
      this.areaData.unshift(initData);
    },
    async initAddressPage() {
      this.provinceIndex = this.provinceData.findIndex((item) => item.id === this.choseCityProps.provinceId);
      this.provinceId = this.choseCityProps.provinceId;
      this.cityId = this.choseCityProps.cityId;
      await this.getCityData();
      await this.getAreaData();
      this.cityIndex = this.cityData.findIndex((item) => item.id === this.choseCityProps.cityId);
      this.areaIndex = this.areaData.findIndex((item) => item.id === this.choseCityProps.areaId);
    },
    emitAddressInfo(index, type, code) {
      let address = {
        provinceId: this.provinceId,
        cityId: this.cityId,
        areaId: this.areaId
      };
      this.$emit('getPropsAddress', address);
    },
    clearChoseCity() {
      this.provinceIndex = 0;
      this.provinceId = '';
      this.cityIndex = 0;
      this.cityData = [];
      this.cityId = '';
      this.areaIndex = 0;
      this.areaData = [];
      this.areaId = '';
      // this.getProvinceData();
    }
  }
};
</script>

<style lang="scss">
.uni-list {
  .uni-list-cell-db {
    display: inline-block;
    color: #999;
    font-size: 26rpx;
    margin-right: 20rpx;
    padding-right: 30rpx;
    position: relative;
    .rightIcon {
      position: absolute;
      right: 0;
      top: 6rpx;
      width: 30rpx;
      height: 30rpx;
      img {
        width: 30rpx;
        height: 30rpx;
      }
    }
  }
}
.colorBlack {
  color: #333;
}
.fontSizeNone {
  font-size: 28rpx;
  margin-bottom: 20rpx;
}
</style>
